ASP / Diversos
Criando uma Nuvem de Tags (Tag Clouds) para seu site com ASP
enviado por Gabriel Fróes
É fato que hoje a maioria dos sites, principalmente os blogs, possui a chamada Nuvem de Tags ou Tag Clouds, mas o que é isso?
As Tag Clouds são uma forma diferente de navegação no site através de tags ou legendas, como queiram.
O conceito geral é a de apresentar várias tags agrupadas destacando as que têm mais peso; ou por ser mais utilizado nas pesquisas ou por ser mais popular por alguma razão.
O que importa na verdade é dar ao visitante do site, uma forma diferente e rápida de encontrar apenas clicando na tag em que o visitante ache a melhor.
O código a seguir foi desenvolvido em ASP. É um procedimento (Sub) que realiza a geração de uma área para as Tag Clouds.
Dei o nome do procedimento de doTagClouds e os parâmetros são:
As Tag Clouds são uma forma diferente de navegação no site através de tags ou legendas, como queiram.
O conceito geral é a de apresentar várias tags agrupadas destacando as que têm mais peso; ou por ser mais utilizado nas pesquisas ou por ser mais popular por alguma razão.
O que importa na verdade é dar ao visitante do site, uma forma diferente e rápida de encontrar apenas clicando na tag em que o visitante ache a melhor.
O código a seguir foi desenvolvido em ASP. É um procedimento (Sub) que realiza a geração de uma área para as Tag Clouds.
Dei o nome do procedimento de doTagClouds e os parâmetros são:
- Id: Identificação da DIV na qual estarão as tags.
- Tags: Lista das tags separadas por vírgula com a respectiva indicação de peso (de 1 a 5). Quanto menor for o peso maior será o destaque da tag em relação às outras.Exemplo: Programação=5,ASP=2,Código=1.
No exemplo acima a tag "Programação" terá menor destaque, enquanto a tag "Código" terá o maior destaque - Link: Este será o link base para criar os links das tags. Será necessário incluir neste link a chave [TAG] para que o procedimento possa substituí-la pela tag propriamente dita.Exemplo: http://www.codigofonte.com.br/tags/[TAG]
<%
'-----------------------------------------------------
'Procedimento: doTagClouds(ByVal Id, ByVal Tags, ByVal Link)
'Sinopse: Gera a area das Tags Clouds com até 5 níveis de peso
'Parametro:
' Id = Id da área das tags
' Tags = Lista das tags separadas por ","
' no seguinte formato: Tag=Peso,Tag2=Peso, ...
' Link = Link para a tag (utilize [TAG] no link
' para substituir pela tag)
'Autor: Gabriel Fróes (www.codigofonte.com.br)
'Data: 20/08/2008
'-----------------------------------------------------
Sub doTagClouds(ByVal Id, ByVal Tags, ByVal Link)
Dim arrTags
Dim Cont
Dim Tag
Dim Peso
If Not Tags = "" Then
Response.Write "<div id=""" & Id & """ class=""tag_clouds"">"
arrTags = Split(Tags, ",")
For Cont = 0 To Ubound(arrTags)
Tag = Split(arrTags(Cont), "=")(0)
Peso = Split(arrTags(Cont), "=")(1)
Response.Write "<h" & Peso & "><a href=""" & Replace(Link, "[TAG]", Lcase(Tag)) & """>" & Tag & "</a></h" & Peso & ">"
Next
Response.Write "<br clear=""all"" /></div>"
End If
End Sub
%>
<html>
<head>
<title>Nubem de Tags - Tag Clouds com ASP</title>
<style>
.tag_clouds{border:1px solid #2C2E2A;padding:7px;width:350px;background:#71766C}
.tag_clouds h1, .tag_clouds h2, .tag_clouds h3, .tag_clouds h4, .tag_clouds h5{margin:0;padding:0;height:30pt;line-height:30pt;display:inline;float:left;text-align:left}
.tag_clouds h1 a, .tag_clouds h2 a, .tag_clouds h3 a, .tag_clouds h4 a, .tag_clouds h5 a{font:bold italic 10pt 'Trebuchet MS';margin:0 1px;color:#BABEB7;text-decoration:none}
.tag_clouds h1 a{font-size:23pt;color:#FFF}
.tag_clouds h2 a{font-size:20pt}
.tag_clouds h3 a{font-size:18pt}
.tag_clouds h4 a{font-size:14pt}
.tag_clouds h5 a{font-size:10pt;color:#c0c0c0}
</style>
</head>
<body>
<%
'Exemplo de chamada do procedimento
Dim asTags
Dim Link
asTags = "Programação=1,Asp=2,PHP=3,HTML=4,Programação=5,Asp=1,PHP=1,HTML=3,Programação=5,Asp=4,PHP=2,HTML=4,Programação=5,Asp=1,PHP=2,HTML=3,Wikipedia=1,Asp=2,PHP=3,HTML=4,JavaScript=5,Asp=1,PHP=2,HTML=3,Programação=1,Asp=2,PHP=3,HTML=4,Programação=5,Asp=1,PHP=2,HTML=3"
Link = "http://www.codigofonte.com.br/tags/[TAG]"
Call doTagClouds("tags", asTags, Link)
%>
</body>
</html>
'-----------------------------------------------------
'Procedimento: doTagClouds(ByVal Id, ByVal Tags, ByVal Link)
'Sinopse: Gera a area das Tags Clouds com até 5 níveis de peso
'Parametro:
' Id = Id da área das tags
' Tags = Lista das tags separadas por ","
' no seguinte formato: Tag=Peso,Tag2=Peso, ...
' Link = Link para a tag (utilize [TAG] no link
' para substituir pela tag)
'Autor: Gabriel Fróes (www.codigofonte.com.br)
'Data: 20/08/2008
'-----------------------------------------------------
Sub doTagClouds(ByVal Id, ByVal Tags, ByVal Link)
Dim arrTags
Dim Cont
Dim Tag
Dim Peso
If Not Tags = "" Then
Response.Write "<div id=""" & Id & """ class=""tag_clouds"">"
arrTags = Split(Tags, ",")
For Cont = 0 To Ubound(arrTags)
Tag = Split(arrTags(Cont), "=")(0)
Peso = Split(arrTags(Cont), "=")(1)
Response.Write "<h" & Peso & "><a href=""" & Replace(Link, "[TAG]", Lcase(Tag)) & """>" & Tag & "</a></h" & Peso & ">"
Next
Response.Write "<br clear=""all"" /></div>"
End If
End Sub
%>
<html>
<head>
<title>Nubem de Tags - Tag Clouds com ASP</title>
<style>
.tag_clouds{border:1px solid #2C2E2A;padding:7px;width:350px;background:#71766C}
.tag_clouds h1, .tag_clouds h2, .tag_clouds h3, .tag_clouds h4, .tag_clouds h5{margin:0;padding:0;height:30pt;line-height:30pt;display:inline;float:left;text-align:left}
.tag_clouds h1 a, .tag_clouds h2 a, .tag_clouds h3 a, .tag_clouds h4 a, .tag_clouds h5 a{font:bold italic 10pt 'Trebuchet MS';margin:0 1px;color:#BABEB7;text-decoration:none}
.tag_clouds h1 a{font-size:23pt;color:#FFF}
.tag_clouds h2 a{font-size:20pt}
.tag_clouds h3 a{font-size:18pt}
.tag_clouds h4 a{font-size:14pt}
.tag_clouds h5 a{font-size:10pt;color:#c0c0c0}
</style>
</head>
<body>
<%
'Exemplo de chamada do procedimento
Dim asTags
Dim Link
asTags = "Programação=1,Asp=2,PHP=3,HTML=4,Programação=5,Asp=1,PHP=1,HTML=3,Programação=5,Asp=4,PHP=2,HTML=4,Programação=5,Asp=1,PHP=2,HTML=3,Wikipedia=1,Asp=2,PHP=3,HTML=4,JavaScript=5,Asp=1,PHP=2,HTML=3,Programação=1,Asp=2,PHP=3,HTML=4,Programação=5,Asp=1,PHP=2,HTML=3"
Link = "http://www.codigofonte.com.br/tags/[TAG]"
Call doTagClouds("tags", asTags, Link)
%>
</body>
</html>
Versão impressa gerada em: sábado, 7 de novembro de 2009
© Copyright 2006 - R&W Consulting.